<template>
  <div class="jingdian">
    <p class="p">{{titl}}</p>
    <ul class="jd">
      <li style="margin-left: 0" v-for="film in gettypeval" :key="film.id">
        <img :src="film.img" />
        <p>{{ film.name}}</p>
        <span>{{ film.author}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Jingdian",
  props: ["titl","type"],
  data() {
    return {
      films: [],
        kv: {
       nam: "jingdian",
       name: "baopo",
      //  names:"rebang",
        
        },
        gettypeval:[]
    };
  },
   methods: {
    gettype(val){
      val.forEach(x => {
        if(x.type == this.type){
          this.gettypeval.push(x);
        }
      });
      console.log(this.gettypeval)
    }
  },
  
  created() {
    axios({
      url: "/vip/films",
      params: {
        type: this.kv[this.title],
      },
    }).then((res) => {
      this.films = res.data;
       this.gettype(this.films);
    });
  },
};
</script>

<style scoped>
.jingdian {
  width: 100%;
}
h6 img {
  width: 100%;
  height: 1.72rem;
  margin-bottom: 0.1rem;
}
.p{
  display: none;
}
.jd {
  width: 3.99rem;
  margin-top: 0.12rem;
  /* background-color: red; */
  display: flex;
  white-space: nowrap;
  overflow: auto;
  margin-left: 0.15rem;
  /* text-align: center; */
}
.jd::-webkit-scrollbar {
  display: none;
}
.jd li img {
  width: 1.24rem;
  height: 1.69rem;
}
.jd li {
  margin-right: 0.1rem;
  color: black;
}
.jd li span {
  font-size: 0.12rem;
  color: #828288;
}
.caini li p {
  margin-top: 0.1rem;
  margin-bottom: 0.08rem;
}
</style>